<template>
  <div class="detail">
    <div class="main">
      <div class="info_main">
        <div class="route">
          当前位置：
          <router-link to="/">首页</router-link>
          <span>＞</span>
          <router-link to="/category">蛋糕</router-link>
          <span>＞</span>
          <a href="#">{{ category[0].fname }}</a>
          <span>＞</span>
          <a href="#">{{ cake[0].title }}</a>
        </div>
        <div class="info">
          <div class="info_img">
            <!-- 大图 -->
            <div v-if="image_show" class="info_img_left fl">
              <!-- http://localhost:3000/images/cake/md/new1.jpg -->
              <img :src="cake[0].img_main" />
            </div>
            <div v-else class="info_img_left fl">
              <!-- http://localhost:3000/images/cake/md/canju_md.jpg -->
              <img :src="cake[0].img_canju_md" />
            </div>
            <!-- 2张小图 -->
            <div class="info_img_right fl">
              <div class="img_cake" @mouseover="show">
                <!-- http://localhost:3000/images/cake/sm/new1_sm.jpg" -->
                <img :src="cake[0].img_sm" />
              </div>
              <div class="img_canju" @mouseover="show2">
                <img :src="cake[0].img_canju_sm" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="info_operate">
        <div class="operate_left">
          <div class="name">{{ cake[0].title }}</div>
          <div class="price">
            <span class="yprice">￥</span>
            <span class="new">{{ cake[0].price }}</span>
            <div class="pro">
              <span class="pro_wei">.00</span>
              <span
                >/{{ cake[0].spec }}{{ cake[0].peizi
                }}{{ cake[0].jiaxin }}</span
              >
            </div>
          </div>
          <div class="introduce">
            {{ cake[0].introduce }}
          </div>
        </div>

        <div class="operate_right">
          <div class="spec">
            <div>规格:</div>
            <div>
              <a
                href="#"
                :class="cid == 1 ? 'style_red' : ''"
                @click="changecolor(1)"
                >{{ cake[0].spec }}</a
              >
              <!-- <a
                href="#"
                :class="cid == 2 ? 'style_red' : ''"
                @click="changecolor(2)"
                >Φ20cm</a>
              <a
                href="#"
                :class="cid == 3 ? 'style_red' : ''"
                @click="changecolor(3)"
                >Φ25cm</a> -->
            </div>
          </div>
          <div class="peizi">
            <div>胚子:</div>
            <div>
              <a
                href="#"
                :class="did == 1 ? 'style_red' : ''"
                @click="changecolor2(1)"
                >{{ cake[0].peizi }}</a
              >
              <!-- <a href="#"
              :class="did == 2 ? 'style_red' : ''"
              @click="changecolor2(2)"
              >巧克力蛋糕</a> -->
            </div>
          </div>
          <div class="jiaxin">
            <div>夹心:</div>
            <div>
              <a
                href="#"
                :class="eid == 1 ? 'style_red' : ''"
                @click="changecolor3(1)"
                >{{ cake[0].jiaxin }}</a
              >
              <!-- <a href="#"
               :class="eid == 2 ? 'style_red' : ''"
              @click="changecolor3(2)"
              >酸奶提子夹心</a> -->
            </div>
          </div>
          <div class="pro_number">
            <button class="icon_left" @click="reduce">-</button>
            <span id="number">{{ amount }}</span>
            <button class="icon_right" @click="plus">+</button>
          </div>
          <div class="submit">
            <button @click="addCart">加入购物车</button>
          </div>
        </div>
      </div>

      <div class="info_detail">
        <!-- 左侧销量排行 -->
        <div class="content_left">
          <div class="top_word">
             <img src="http://localhost:3000/images/cake/detail/top10.jpg">
          </div>
         <!-- 下方TOP10蛋糕商品列表 -->
          <div
            class="content_top"
            v-for="(item, index) of top_cake"
            :key="index"
            @mouseover="showPic(index)"
          >
          <!-- 鼠标移入标题时触发showpic事件，并传入参数index下标 -->
              <ul>
              <li>
                <span><img :src="item.img_number" /></span>
                <span class="show_title">{{ item.title }}</span>
                <!-- 动态绑定样式 -->
                <!-- 默认选中下标为0，即第一张图片显示 -->
                <div class="show_image" :class="showpic==index ? 'active':''">
                  <a href="#">
                    <img :src="item.img_sm" style="margin-left: 30px" />
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 右侧产品属性 -->
        <div class="content_right">
          <!-- 上部位 -->
          <div class="detail_attr">
            <div></div>
            <div>产品属性</div>
          </div>
          <div class="detail_attr2">
            <span>保存条件：冷藏2天（建议当天食用）</span>
            <span>特色原料：100%使用优质天然奶油</span>
          </div>
          <div>
            <img :src="cake[0].img_detail1" />
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧悬浮框 -->

    <div class="soller">
      <ul>
        <li>
          <a href="#" @mouseenter="img_show" @mouseleave="leave">
            <img src="../assets/list/phone.png" />
          </a>
          <div v-if="phone_show" class="phone_detail">
            <p>订购热线</p>
            <p>4001-170-170</p>
            <p>(热线服务时间: 08:00-20:00)</p>
          </div>
        </li>
        <li>
          <a href="#" @mouseenter="img_show2" @mouseleave="leave2">
            <img src="../assets/list/erweima.png" alt="" />
            <div v-if="erweima_show" class="erweima_detail">
              <img src="../assets/list/wx.png" alt="" />
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../assets/list/shangjiantou.png" alt="" />
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ["lid"],
  data() {
    return {
      amount: 1,
      cid: 1,
      did: 1,
      eid: 1,
      cake: [{ title: 0 }],
      category: [{ fname: 0 }],
      image_show: true,
      top_cake: [],
      phone_show: false,
      erweima_show: false,
      showpic:0
    };
  },
  methods: {
    //鼠标移入标题时触发，修改默认选中的图片
    showPic(i){
      this.showpic=i;
    },
    //将当前商品加入购物车
    addCart() {
      let product = {
          lid:this.cake[0].lid,
          image:this.cake[0].img_sm,
          title:this.cake[0].title,
          spec:this.cake[0].spec,
          peizi:this.cake[0].peizi,
          jiaxin:this.cake[0].jiaxin,
          amount:this.amount,
          price:this.cake[0].price
      }
        this.$store.commit("addItem", product);
         this.$router.push("/shopcar");
    },
    // 悬浮框的激活效果
    img_show() {
      this.phone_show = true;
    },
    img_show2() {
      this.erweima_show = true;
    },
    leave() {
      this.phone_show = false;
    },
    leave2() {
      this.erweima_show = false;
    },
    //商品数量加减
    plus() {
      this.amount++;
    },
    reduce() {
      if (this.amount === 0) {
        return;
      } else {
        this.amount--;
      }
    },
    changecolor(number) {
      this.cid = number;
    },
    changecolor2(number) {
      this.did = number;
    },
    changecolor3(number) {
      this.eid = number;
    },
    show() {
      this.image_show = true;
    },
    show2() {
      this.image_show = false;
    },
  },

  mounted() {
   // console.log("页面挂载时发送请求.......");
   //本页商品对象数据
    this.axios(`/product/detail?lid=${this.lid}`).then((res) => {
      console.log(res.data.results);
      this.cake = res.data.results;
    });
    //最上方跳转栏数据
    this.axios(`/product/allcategory?lid=${this.lid}`).then((res) => {
      // console.log(res.data.results);
      this.category = res.data.results;
    });
    //左侧销量排行的数据
    this.axios("/product/top").then((res) => {
      //console.log(res.data)
      this.top_cake = res.data.results;
    });
  },
  watch: {
    lid() {
      this.axios(`/product/detail?lid=${this.lid}`).then((res) => {
        //  console.log(res.data.results);
        this.cake = res.data.results;
      }),
        this.axios(`/product/allcategory?lid=${this.lid}`).then((res) => {
          // console.log(res.data.results);
          this.category = res.data.results;
        });
    },
  },
};
</script>
<style>
.content_left .top_word{
  width: 290px;
  height: 28px;
  border-bottom: 1px solid #bcbcbc;
}
.show_image{
  display: none;
}
.show_title:hover+.show_image,.show_image.active{
    display: block;
}
.content_top ul>li{
  position: relative;
}
.detail .detail_attr2 span:nth-child(1) {
  margin-right: 216px;
}
.detail .detail_attr2 {
  width: 870px;
  margin-top: 10px;
  margin-bottom: 50.5px;
}
.detail .detail_attr {
  width: 870px;
  height: 21px;
  border-bottom: 1px solid #bcbcbc;
  margin-top: 5px;
}
.detail .detail_attr div:first-child {
  width: 4px;
  height: 16px;
  margin: 0 5px 0 0;
  background-color: #cf0f25;
  float: left;
}
.detail .detail_attr div:nth-child(2) {
  /* float: left; */
  font-size: 16px;
  color: #000;
  line-height: 13px;
}
.detail .content_right {
  width: 870px;
  margin-bottom: 50.5px;
  float: right;
}
.detail .content_top ul li {
  margin-top: 17px;
}

.detail .content_top {
  width: 280px;
  margin-left: 10px;
  background-color: #fff;
  /* border-top: 1px solid #bcbcbc; */
}
.detail .content_left {
  width: 290px;
  height: 30px;
  background-color: #fff;
  float: left;
}
.detail .info_detail {
  width: 1170px;
  height: 800px;
  margin: 0 auto;
}
.detail .img_cake,
.img_canju {
  width: 107px;
  height: 107px;
}
.detail .img_cake:hover,
.img_canju:hover {
  border: 1px solid #000;
}
.detail .submit button {
  background-color: #e4004f;
  color: #fff;
  font: 500 16px "微软雅黑";
  width: 123px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  text-align: center;
  margin-top: 13px;
  border: 0;
  border-radius: 5px;
}

.detail .pro_number {
  margin-top: 15px;
}
.detail .icon_left,
.icon_right {
  width: 25px;
  height: 27px;
  border: 1px solid #757575;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
}
.icon_left:hover,
.icon_right:hover {
  border: 1px solid #e4004f;
}

.detail #number {
  width: 40px;
  height: 25px;
  margin: 0 5px;
  border: 1px solid #757575;
  display: inline-block;
  text-align: center;
  line-height: 25px;
}
.detail .peizi div:nth-child(2) a,
.jiaxin div:nth-child(2) a {
  width: 184px;
  height: 32px;
  text-align: center;
  display: block;
  height: 30px;
  float: left;
  margin: 0 1px;
  border: 1px solid #757575;
  font-size: 12px;
  line-height: 30px;
  color: #757575;
  margin-bottom: 5px;
}
.detail .spec div:nth-child(2) a {
  width: 153px;
  height: 32px;
  text-align: center;
  display: block;
  height: 30px;
  float: left;
  margin: 0 1px;
  border: 1px solid #757575;
  font-size: 12px;
  line-height: 30px;
  color: #757575;
  margin-bottom: 5px;
}
.detail .operate_right a:hover {
  border: 1px solid #cf0f25 !important;
  background: url("../assets/detail/xiabiao.png") no-repeat bottom right !important;
}

.style_red {
  border: 1px solid #cf0f25 !important;
  background: url("../assets/detail/xiabiao.png") no-repeat bottom right !important;
}

.detail .peizi div:first-child,
.jiaxin div:first-child {
  float: left;
  line-height: 35px;
  margin-right: 8px;
}
.detail .spec div:nth-child(1) {
  float: left;
  margin-right: 8px;
}
.detail .spec,
.peizi,
.jiaxin {
  width: 640px;
  height: 30px;
  margin: 10px 0;
  line-height: 30px;
}

.detail .pro_wei {
  font-weight: bold;
}
.detail .yprice {
  font-size: 23px;
  line-height: 40px;
}
.detail .new {
  font-size: 49px;
  font-family: Helvetica;
  color: #e4004f;
  letter-spacing: -3px;
}
.detail .price .pro {
  width: 165px;
  position: absolute;
  top: 30px;
  left: 98px;
  font-size: 16px;
  color: #e4004f;
  letter-spacing: 0.6px;
  line-height: 20px;
}
.detail .introduce {
  width: 500px;
  height: 18px;
  font-size: 12px;
  margin: 15px 0;
  clear: both;
}
.detail .operate_left .price {
  position: relative;
  width: 285px;
  height: 80px;
  line-height: 60px;
  float: right;
  margin-top: 10px;
}
.detail .name {
  width: 185px;
  height: 80px;
  float: left;
  font-size: 17px;
  line-height: 20px;
  color: #000;
  margin-top: 20px;
}
.detail .operate_right {
  width: 640px;
  padding: 0 0 0 25px;
  float: left;
  margin-top: 20px;
}
.detail .operate_left {
  width: 500px;
  margin: 5px 0 0 0;
  float: left;
}
.detail .info_operate {
  width: 1170px;
  height: 300px;
  margin: 0 auto;
}
.detail .fl {
  float: left;
}
.detail .fr {
  float: right;
}
.detail {
  width: 100%;
  height: auto;
  background-color: #fff;
  margin-top: 96px;
}
.detail .main {
  width: 100%;
  height: 8150px;
  background: #fff;
  margin: 0 auto;
}
.detail .info_main {
  width: 1170px;
  height: auto;
  margin: 0 auto;
  padding: 10px 20px;
}
.detail .route {
  font-size: 12px;
}
.detail .route a {
  color: #757575;
}
.detail .info {
  width: 1170px;
  height: 500px;
  border-bottom: 1px solid #bcbcbc;
}
.detail .info_img {
  width: 900px;
  margin: 20px auto;
}
.detail .info_img_left {
  width: 700px;
}
.detail .info_img_right {
  width: 107px;
}
.detail .info_img_right img {
  width: 105px;
  height: 105px;
  /* margin: 4px 0; */
  border: 1px solid #fff;
}
/*悬浮框图标*/
.soller {
  position: fixed;
  top: 80%;
  right: 20px;
  border: 1px solid rgba(0, 0, 0, 0);
}
.soller ul {
  margin-top: -200px;
}
.soller ul li {
  width: 60px;
  height: 60px;
  margin: 1px 0 0;
  list-style: none;
  background-color: #f7e4e4;
}

.soller ul li a img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  display: table-cell;
  margin: 5px auto 0;
}
.soller ul li:nth-child(2) a div img {
  width: 120px;
  height: 150px;
}

.phone_detail {
  width: 177px;
  height: 120px;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  position: absolute;
  top: -190px;
  right: 62px;
}
.phone_detail p:nth-child(1) {
  font-size: 16px;
  margin-top: 16px;
  margin-left: 17px;
}
.phone_detail p:nth-child(2) {
  font-size: 23px;
  margin-left: 17px;
  color: #c2002d;
  font-family: arial;
}
.phone_detail p:nth-child(3) {
  font-size: 12px;
  margin-left: 17px;
  font-family: arial;
  color: #757575;
}
.erweima_detail {
  width: 120px;
  height: 150px;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  position: absolute;
  top: -130px;
  right: 62px;
}
</style>